import React, { useEffect, useState } from "react";
import { Descriptions, Button, Card } from "antd";
// 引入api请求
import { HospitalDetailsRequest } from "@/api/hospital/hospitalList";
import { useNavigate, useParams } from "react-router-dom";
// 引入返回值类型
import {
  HospitalDetailsType,
  hospitalListItemsType,
  bookingRuleType,
} from "@/api/hospital/model/hospitalListTypes";
export default function HospitalShow() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [hospitalData, setHospitalData] = useState<HospitalDetailsType>({});
  useEffect(() => {
    const re = async () => {
      const res = await HospitalDetailsRequest(id as string);
      setHospitalData(res);
    };
    re();
  }, []);
  return (
    <div>
      <Card>
        <Descriptions title="基本信息" bordered column={2}>
          <Descriptions.Item label="医院名称">
            {(hospitalData.hospital as hospitalListItemsType)?.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院logo">
            {(hospitalData.hospital as hospitalListItemsType)?.logoData ? (
              <img
                width={100}
                src={`data:image/jpeg;base64,${
                  (hospitalData.hospital as hospitalListItemsType)?.logoData
                }`}
                alt=""
              />
            ) : (
              ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">
            {(hospitalData.hospital as hospitalListItemsType)?.hoscode}
            {/* {hospitalData?.hospital?.hoscode} */}
          </Descriptions.Item>
          <Descriptions.Item label="医院地址">
            {
              (hospitalData.hospital as hospitalListItemsType)?.param
                .fullAddress
            }
          </Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={2}>
            {(hospitalData.hospital as hospitalListItemsType)?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介">
            {(hospitalData.hospital as hospitalListItemsType)?.intro}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions
          title="预约规则信息"
          bordered
          column={2}
          style={{ marginTop: "20px" }}
        >
          <Descriptions.Item label="预约周期">
            {(hospitalData.bookingRule as bookingRuleType)?.cycle}
          </Descriptions.Item>
          <Descriptions.Item label="放号时间">
            {(hospitalData.bookingRule as bookingRuleType)?.releaseTime}
          </Descriptions.Item>
          <Descriptions.Item label="停挂时间">
            {(hospitalData.bookingRule as bookingRuleType)?.stopTime}
          </Descriptions.Item>
          <Descriptions.Item label="退号时间">
            {(hospitalData.bookingRule as bookingRuleType)?.quitTime}
          </Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
            {(hospitalData.bookingRule as bookingRuleType)?.rule.map(
              (item, index) => {
                return <p key={index}>{item}</p>;
              }
            )}
          </Descriptions.Item>
        </Descriptions>
        <Button
          style={{ marginTop: "30px" }}
          onClick={() => {
            navigate(-1);
          }}
        >
          返回
        </Button>
      </Card>
    </div>
  );
}
